<template>
  <div class="company-container">
    <xl-search-form :formItems="formItems" @search="search"></xl-search-form>

    <xl-table :action="loadData" :columns="columns" ref="xlTableRef" @selection-change="selectionChange">
      <template slot="top">
        <div style="margin-bottom: 15px">
          <el-button type="primary" size="small" :disabled="disabled" @click="dialogVisible = true"> 设置为招聘会 </el-button>
          <el-button type="danger" size="small" :disabled="disabled" @click="handleRemoveJobFairsCompany">取消招聘会</el-button>
        </div>
      </template>
      <template slot="industryId" slot-scope="{ row }">
        <span>{{ industryName(row.industryId) }}</span>
      </template>
      <template slot="isJobFairs" slot-scope="{ row }">
        <span v-show="row.jobFairs">是</span>
      </template>
      <template slot="belong" slot-scope="{ row }">
        <span v-if="row.jobFairs">{{ row.jobFairs.title }}</span>
      </template>
      <template slot="action" slot-scope="{ row }">
        <el-button type="text" @click="handleToEdit(row.id)">编辑</el-button>
        <el-button type="text" @click="handleToDetail(row.id)">查看</el-button>
      </template>
    </xl-table>

    <!-- 选择招聘会 -->
    <el-dialog title="选择招聘会" :visible.sync="dialogVisible" width="30%" @close="resetForm">
      <span style="font-size: 14px">招聘会：</span>
      <el-select v-model="selectJobFairs" placeholder="请选择">
        <el-option v-for="item in jobFairsList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handleConfirmJobFairs">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCompanyList } from '@/api/company'
import { getIndustryList } from '@/api/industry'
import { getJobFairsList, setJobFairsCompany, removeJobFairsCompany } from '@/api/job-fairs'
import { columns, formItemsFun } from './const'

export default {
  name: 'CompanyIndex',
  data() {
    return {
      columns,
      industryList: [], // 行业列表
      jobFairsList: [], // 招聘会列表
      showCompanyFormDialog: false, // 添加公司账号对话框
      dialogVisible: false, // 添加招聘会对话框
      selectJobFairs: null,
      selectCompany: [] // 选择的公司
    }
  },
  computed: {
    formItems() {
      return formItemsFun(this.jobFairsList)
    },
    disabled() {
      if (this.selectCompany.length <= 0) {
        return true
      }
      return false
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const industry = await getIndustryList({ page: 1, size: 99, pid: 0 })
      const jobFairs = await getJobFairsList({ page: 1, size: 99 })
      this.jobFairsList = jobFairs.data.list || []
      this.industryList = industry.data.list || []
    },
    // 跳转详情页
    handleToDetail(id) {
      this.$router.push({
        path: '/company/detail',
        query: { id }
      })
    },
    // 跳转到编辑页
    handleToEdit(id) {
      this.$router.push({
        path: '/company/edit',
        query: { id }
      })
    },
    // 移除招聘会
    async handleRemoveJobFairsCompany() {
      const res = await removeJobFairsCompany({ ids: this.selectCompany })
      if (res.code === 200) {
        this.$message.success('移除成功')
        this.$refs['xlTableRef'].loadData()
      }
    },
    // 确认招聘会
    async handleConfirmJobFairs() {
      const { selectJobFairs, selectCompany } = this
      if (!selectJobFairs) {
        return this.$message.error('请选择招聘会')
      }
      // 发送请求
      const res = await setJobFairsCompany({ id: selectJobFairs, ids: selectCompany })
      if (res.code === 200) {
        this.dialogVisible = false
        this.$message.success('设置成功')
        this.$refs['xlTableRef'].loadData()
      }
    },
    // 多选
    selectionChange(e) {
      this.selectCompany = e.map((item) => item.id)
    },
    // 获取行业名称
    industryName(value) {
      const industry = this.industryList.find((item) => item.id === value)
      if (industry) {
        return industry.name
      }
      return ''
    },
    // 重置
    resetForm(formName) {
      if (formName) {
        this.$refs[formName].resetFields()
      }
      this.dialogVisible = false
      this.showCompanyFormDialog = false
      this.selectJobFairs = null
    },
    search(params) {
      this.$refs['xlTableRef'].loadData(params)
    },
    loadData(params) {
      return getCompanyList(params)
    }
  }
}
</script>

<style lang="scss" scoped></style>
